<%--
  Created by IntelliJ IDEA.
  User: asd73
  Date: 2017/9/21
  Time: 22:54
  To change this template use File | Settings | File Templates.
  jq控制css
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <style type="text/css">
        div{width: 300px; height: 300px;background: pink;}
    </style>
    <script type="text/javascript">
        $(function () {
            $('button').eq(0).click(function (e) {
                //alert(1);
                $('div').css('width','200px');//设置css中的属性
            })
            $('button').eq(1).click(function (e) {
                //alert(1);
                $('div').css('height','400px');
            })
            $('button').eq(2).click(function (e) {
                //alert(1);
                $('div').css('background','red');
            })
            $('button').eq(3).click(function (e) {
                //alert(1);
                //$('div').css({'width':'200px','height':'400px','backgroundColor':'red'});//多个属性时格式不一样
                $('div').css({'width':'200px','height':'400px',backgroundColor:'red'});//这种方法也可以
            })
            $('button').eq(4).click(function (e) {
                //alert(1);
                alert($('div').css('width'));//css中只写属性，那么就是获取其参数
            })

        })
    </script>
</head>
<body>
    <button>变宽</button>
    <button>变高</button>
    <button>变色</button>
    <button>宽、高、色</button>
    <button>获取</button>
    <div></div>
</body>
</html>
